<template>
	<view class="body">
		<xk-header :headerbg="true" :back="true" title="账号登录"></xk-header>
		<view class="list-info">
			<view class="list-item">
				<!-- 测试环境 -->
				<picker :range="accounts" :value="accountIndex === -1 ? 0 : accountIndex" range-key="account"
					@change="accountChange" v-if="isDev">
					<view>账号</view>
				</picker>

				<!-- 非测试环境 -->
				<view v-if="!isDev">账号</view>

				<input class="input-text" v-model="account" type="text" placeholder="请输入您的账号"
					placeholder-style="color:#ccc" />
			</view>
			<view class="list-item">
				<view>密码</view>
				<input class="input-text" v-model="password" type="password" placeholder="请输入您的密码"
					placeholder-style="color:#ccc" data="passwordtype" />
			</view>
		</view>
		<view class="remember">
			<u-checkbox-group placement="column">
				<u-checkbox :customStyle="{marginBottom: '8px'}" label="记住密码" name="记住密码" :checked="isChecked"
					@change="checkboxChange(isChecked)">
				</u-checkbox>
			</u-checkbox-group>
		</view>

		<view class="common-btn" @click="login()">登录</view>
		<!-- <view class="common-btn btn-sty2" @click="changePass()">修改密码</view> -->
	</view>
</template>
<script>
	import config from '@/common/config.js'
	import moment from 'moment'

	export default {
		data() {
			return {
				isChecked: false,
				isDev: this.$config.isDev,
				account: uni.getStorageSync('account') || "",
				password: uni.getStorageSync('password') || "",

				accountIndex: -1,
				accounts: [{
					account: "demo001@CC202106002",
					password: "428961",
				}]

			};
		},
		onLoad(options) {
			console.warn("isDev=====: ", this.isDev)
		},
		methods: {
			checkboxChange(e) {
				this.isChecked = !this.isChecked
			},
			login() {
				if (!this.account) {
					this.$util.toast("请输入您的账号")
					return;
				}
				if (!this.password) {
					this.$util.toast("请输入您的密码")
					return;
				}
				this.$util.post({
					url: "app/login",
					data: {
						account: this.account,
						password: this.password
					}
				}).then((res) => {
					// wx.setStorageSync({
					// 	'account': this.account,
					// 	'password': this.password
					// })
					uni.setStorageSync('account', this.isChecked ? this.account : '');
					uni.setStorageSync('password', this.isChecked ? this.password : '');

					
					// console.log(res, '登录成功')
					this.$util.loginSuccess(res)
					this.$store.commit('changeTabbarName', '首页')
				});
			},
			// changePass() {
			// 	if (!this.account) {
			// 		this.$util.toast("请输入您的账号")
			// 		return;
			// 	}
			// 	uni.navigateTo({
			// 		url: "/pagesC/login/change-password"
			// 	})
			// },
			accountChange(e) {
				this.accountIndex = e.detail.value;
				this.account = this.accounts[this.accountIndex].account
				this.password = this.accounts[this.accountIndex].password
			}
		}
	}
</script>

<style lang="scss">
	.list-info {
		margin: 20rpx 20rpx 0rpx 20rpx;

		.list-item {
			display: flex;
			background-color: #FFFFFF;
			border-radius: 10rpx;
			font-size: 28rpx;
			padding: 30rpx;
			font-size: 28rpx;
			color: #333;
			align-items: center;

			.input-text {
				flex: 1;
				color: #333;
				margin-left: 20rpx;
			}
		}
	}
	.remember{
		padding: 30rpx 30rpx 0rpx 30rpx;
	}
	// .button {
	// 	background-size:100%;
	// 	background-image:url("/static/weixin.png") ;
	// 	width: 100rpx;
	// 	height: 100rpx;
	// }
</style>